<template>
  <div class="sidebar">
    <el-menu
        class="sidebar-el-menu"
        :default-active="onRoutes"
        :collapse="collapse"
        :background-color="colors.managerSidebarBgColor"
        :text-color="colors.managerSidebarTextColor"
        :active-text-color="colors.managerSidebarTextActiveColor" unique-opened router>
      <template v-for="item in items">
        <template v-if="item.children">
          <el-submenu :index="item.path" :key="item.name">
            <template #title>
              <i :class="`el-icon-${item.meta.icon||'menu'}`"></i>
              <span>{{ item.meta.title || '' }}</span>
            </template>
            <template v-for="subItem in item.children||[]">
              <el-submenu v-if="subItem.children" :index="subItem.path" :key="subItem.name">
                <template #title>{{ subItem.meta.title || '' }}</template>
                <el-menu-item v-for="(threeItem, i) in subItem.children||[]" :key="i" :index="threeItem.path">
                  {{ threeItem.meta.title || '' }}
                </el-menu-item>
              </el-submenu>
              <el-menu-item v-else :index="subItem.path" :key="subItem.name">{{ subItem.meta.title || '' }}
              </el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.path" :key="item.name">
            <i :class="`el-icon-${item.meta.icon||'menu'}`"></i>
            <template #title>{{ item.meta.title || '' }}</template>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import {computed, ref, watch} from "vue";
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
import {isArray} from "../utils/helpers";
import Config from "../config/Config";

export default {
  data() {
    return {
      colors: Config.colors,
    }
  },
  setup() {
    const route = useRoute();
    const store = useStore();
    const routes = useRouter().getRoutes()
    let items = ref([]);
    watch(() => store.state.user.role, (v) => {
      initSidebarWithRoute(v);
    }, {
      immediate: true,
    })

    function initSidebarWithRoute(role) {
      for (let item of routes) {
        if (item.name === 'admin') { // v1 route
          const rChildren = (item.children || []);
          items.value = rChildren.filter(v => filterRoutes(v, role));
          break;
        }
      }

      function filterRoutes(route, role) {
        if (route.meta.hideInMenu) {
          return false;
        }
        let rotes = route.meta.role || [];
        if (!isArray(rotes)) {
          rotes = [rotes];
        }
        if (rotes.length && !rotes.includes(role)) { // 该角色不允许查看该菜单
          return false;
        }
        if (route.children && route.children.length) {
          route.children = route.children.filter(v => !v.meta.hideInMenu)
        }
        return true;
      }
    }


    const onRoutes = computed(() => {
      return route.path;
    });

    const collapse = computed(() => store.state.collapse);

    return {
      items,
      onRoutes,
      collapse,
    };
  },
};
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
}

.sidebar > ul {
  height: 100%;
}
</style>
